<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span class="header-title">您的课程</span>
        <el-input
          v-model="searchQuery"
          placeholder="搜索相关课程..."
          class="search-input"
          prefix-icon="el-icon-search"
        />
      </div>
    </template>

    <div class="course-card-container">
      <el-card
        v-for="course in filteredCourses"
        :key="course.id"
        class="course-card"
        :body-style="{ padding: '20px' }"
      >
        <div class="course-content">
          <el-image :src="course.image" alt="Course Image" class="course-image" />
          <h3 class="course-title">{{ course.name }}</h3>
          <div class="course-info">
            <span class="course-university">{{ course.university }}</span>
            <span class="course-credit">学分: {{ course.credit }}</span>
            <span class="course-teacher">教师: {{ course.teacherName }}</span>
            <div class="course-status">
          <span :style="{ color: course.isOpen === 1 ? 'green' : 'red' }">
            {{ course.isOpen === 1 ? '开课' : '未开课' }}
          </span>
        </div>
          </div>
          <div class="course-end-date">
            <span>{{ course.endDate }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getByIdService } from '../../api/course'
import { getTeacherByIdService } from '../../api/teacher'
import { getScByStudentIdService } from '../../api/sc'
import { useUserInfoStore } from '../../stores/userInfo'
import { useTokenStore } from '../../stores/token'
import ImageFetcher from '@/utils/ImageFetcher.js'
const userInfoStore = useUserInfoStore()
const userInfo = ref({ ...userInfoStore.userInfo })
const courses = ref([])
const searchQuery = ref('')

const filteredCourses = computed(() => {
  return courses.value.filter(course =>
    course.name.includes(searchQuery.value)
  )
})
const courseList = async () => {
  const stuId = userInfo.value.id;
  try {
    let courseIdResponse = await getScByStudentIdService(stuId);
    const courseIdsData = courseIdResponse.data;
    const courseIds = courseIdsData.map(item => item.couId);

    const token = useTokenStore().token; 
    const imageFetcher = new ImageFetcher(token); // 创建 ImageFetcher 实例

    const coursesData = await Promise.all(courseIds.map(async (couId) => {
      const courseResponse = await getByIdService(couId);
      const teacherResponse = await getTeacherByIdService(courseResponse.data.teacherId);

      const courseImageUrl = courseResponse.data.image; // 假设返回的数据中包含一个 image 字段
      const image = await imageFetcher.fetchImage(courseImageUrl); // 获取图片

      return {
        ...courseResponse.data,
        teacherName: teacherResponse.data.name,
        image, // 设置获取到的图片
      };
    }));

    courses.value = coursesData;
  } catch (error) {
    console.error('Error fetching course data:', error);
  }
}


courseList()
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: #f9f9f9;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .header-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }

  .search-input {
    width: 300px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }

  .course-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .course-card {
    width: 220px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-5px);
    }
  }

  .course-content {
    display: flex;
    flex-direction: column;
  }

  .course-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    margin-bottom: 10px;
  }

  .course-title {
    font-size: 18px;
    margin: 0 0 10px 0;
    color: #333;
  }

  .course-info {
    font-size: 14px;
    color: #666;

    .course-university {
      display: block;
    }

    .course-credit,
    .course-teacher {
      display: inline-block;
      margin-right: 10px;
    }
  }

  .course-status {
    margin-top: 10px;
    font-weight: bold;
  }

  .course-end-date {
    margin-top: 10px;
    color: #999;
  }
}
</style>
